<template>
   <el-header>
        <div class="h-l">
            <i-ep-Menu @click="isCollapse"></i-ep-Menu>
            <span>vue node开发后台管理系统</span>
        </div>
        <div class="h-r">
            <span>欢迎admin回来</span>
            <el-dropdown>
                <i-ep-Avatar class="avatar"></i-ep-Avatar>
                <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </el-header>
    
    </template>
    
    <script setup >
    import { useCounterStore } from '@/stores/counter';
    const counter = useCounterStore()
    const isCollapse = ()=>{
        counter.change()
        console.log(1);
    }
    </script>
    
    <style scoped lang="scss">
    .el-header{
        height:80px;
        line-height:80px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        .h-l{
            display:flex;
            align-items:center;
        }
        .h-r{
          text-align:right;
          display:flex;
          align-items:center;
          .avatar{
            font-size:20px;
          }
        }
    }
    </style>
    